import { useState, useEffect } from "react";
import { resourcePath } from "../../../../../../../../utils/resource";
import PanelRight from "../../../../../../../common/PanelRight";
import { InputNumber, Radio, Space } from "antd";

export default function Wzcb(props){
    const [radius, setRadius] = useState();
    const [isOpen, setIsOpen] = useState();

    //下拉菜单
    const tooggleMenu = () => {
        setIsOpen(!isOpen);
    };
    const handleClick = () => {
        setIsOpen(!isOpen);
    };

    return <div style={{
        position: 'absolute',
        right: 0,
        width: 670,
        top: 0,
        bottom: 0,
        zIndex: 1,
        pointerEvents: 'none',
        backgroundSize: "100% 100%"
    }}>{props.children}
        <div style={{
                width: 350,
                position: 'fixed',
                right: 20,
                top: '14%',
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                pointerEvents: 'auto',
                borderRadius: 8
            }} className="jzzy-layout">

            <div style={{
                fontSize: 20,
                fontWeight: "bold"
            }} className='jzzy-one'>
                <div style={{
                    background: `url(${resourcePath.blockTitleBg})`,
                    height: '100%',
                    backgroundSize: '100% 100%',
                    fontSize: 18,
                    lineHeight: '36px',
                    paddingLeft: 12,
                    fontWeight: "bold"
                }}>
                    <button onClick={handleClick} style={{color: '#fff'}} className="menu">
                         救灾物资储备库
                         {isOpen ? <span>&#9650;</span> : <span>&#9660;</span>}
                    </button>
                </div>
                {isOpen && (
                    <div className="dropdown-menu"><p className="menu-item">救灾物资储备库</p></div>
                 )}
            </div>
            
            <div className="jzzy-two">
                <div style={{
                    border: '1px solid #045484',
                    height: '40px',
                    width: '100%',
                    marginTop: '3%',
                    display: 'flex',
                    alignItems: 'center',
                    color: '#5786ab'
                }}>&nbsp;&nbsp;&nbsp;&nbsp;大坝村物资储备库</div>
                
                <div style={{
                    border: '1px solid #045484',
                    height: '40px',
                    width: '100%',
                    marginTop: '3%',
                    display: 'flex',
                    alignItems: 'center',
                    color: '#5786ab'
                }}>&nbsp;&nbsp;&nbsp;&nbsp;燕子村物资储备库</div>
            </div>
        </div>
       
    </div>
}